

<template>
<h1>个人简训练</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td><img v-bind:src="card.imgUrl" width="100"></td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{card.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{card.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="item in card.friends">{{item}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="add">点击加载数据</button>
</template>

<script setup>
import {ref} from "vue";

const card = ref({name:'',age:'',imgUrl:'',friends:[]});
const add = ()=>{
   card.value={
     name:'传奇',
     age:18,
     imgUrl: 'fcq.jpg',
     friends: ['花花','草草','顾顾','闷闷']
   }
}

</script>

<style scoped>

</style>